<template>
    <div class="detail">
        <van-swipe class="item-swip" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(pms_product_image) in pms_product_images" :key="pms_product_image.id">
                <img v-lazy="pms_product_image.imgUrl" style="width: 100vm; height: 60vh"/>
            </van-swipe-item>
        </van-swipe>
        <van-cell-group class="item_cell_group">
            <van-cell class="item_info">
                <div>{{this.pms_product_info.description}}</div>
            </van-cell>
        </van-cell-group>
        <van-cell-group class="item_select">
            <van-cell title="已选" is-link="" label="描述信息"></van-cell>
            <van-cell title="送至" value="" label="地址信息" is-link>
            </van-cell>
            <van-cell title="门店" label="门店地址" is-link></van-cell>
        </van-cell-group>
        <van-goods-action class="item_operate">
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" badge="3" />
            <van-goods-action-icon icon="shop-o" text="店铺"  />
            <van-goods-action-button type="warning" text="加入购物车" @click="addToCart" />
            <van-goods-action-button type="danger" text="立即购买" @click="byNow"/>
        </van-goods-action>
        <van-sku
                v-model="show"
                :sku="sku"
                :goods="goods"
                :goods-id="goodsId"
                :quota="quota"
                :quota-used="quotaUsed"
                :hide-stock="sku.hide_stock"
                :message-config="messageConfig"
                @buy-clicked="onBuyClicked"
                @add-cart="onAddCartClicked"
        />
    </div>
</template>

<script>
    import Vue from 'vue';
    import { GoodsAction, GoodsActionIcon, GoodsActionButton,Sku} from 'vant';
    import {ApiService} from "../../../axios/apiService";
    const pmsInfo = new ApiService('/pms/pmsInfo')
    const pmsImges = new ApiService('/pms/pmsImages')
    const skuApi = new ApiService('/sku')
    Vue.use(Sku);
    Vue.use(GoodsAction);
    Vue.use(GoodsActionButton);
    Vue.use(GoodsActionIcon);
    export default {
        props: {
        },
        data() {
            return {
                show:false,
                pms_product_info:{},
                pms_product_images:[],
                sku: {},
                goods: {
                    // 默认商品 sku 缩略图
                    picture: 'https://img.yzcdn.cn/1.jpg'
                }
            };
        },
        mounted() {
            this.getPmsProductInfo(this.$route.params.spuId);
        },
        methods:{
            byNow(){
                this.getSku(this.$route.params.spuId);
                this.show=true;
            },
            getSku(spuId){
                skuApi.getViewById(spuId).then(res=>{
                    this.sku=res.data;
                })
            },
            onAddCartClicked(skuData){
                console.log(skuData.selectedSkuComb)
            },
            onBuyClicked(skuData){
              console.log(skuData)
            },
            getPmsProductInfo(spuId){
               pmsInfo.getViewById(spuId).then(res=>{
                   this.pms_product_info = res.data;
               })
               pmsImges.getViewById(spuId).then(res=>{
                   this.pms_product_images = res.data;
               })
            },
        }
    };
</script>
<style>
    .item-swip {
        width: 100vm;
        height: 60vh;
    }
    .item_select {
        margin-top: 5vh;
    }
    .item_operate {
        position: fixed;
        margin-top: 90vh;
    }
</style>
